<script setup lang="ts">
import articles from "../api/articles.js";
import user from "../api/user.js";
import Header from "../components/Header.vue";
import {reactive, ref} from "vue";
import {ElMessage, FormInstance, FormRules} from 'element-plus'
import type {UploadFile, UploadProps, UploadUserFile, UploadInstance} from 'element-plus'

const ruleFormRef = ref<FormInstance>()
const uploadRef = ref<UploadInstance>()
import {Plus, ZoomIn} from '@element-plus/icons-vue'
import {useStore} from "vuex"

const store = useStore()

const validateContent = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入文章内容'))
  } else {
    if (articles.articlesForm.content !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass')
    }
    callback()
  }
}

const articlesRules = reactive<FormRules<typeof articlesRules>>({
  content: [{validator: validateContent, trigger: 'blur'}],

})

// 上传图片


// 上传头像成功，得到图片路径
const successImg = (res) => {
  articles.articlesForm.article_imgs += res.imgPath + ','
  console.log(res)
}

// 上传表单
const submitForm = async (formEl: FormInstance | undefined) => {

  if (!formEl) return
  formEl.validate(async valid => {
    if (valid) {
      // 用户id
      articles.articlesForm.user = store.state.user.user_id
      // 上传图片
      console.log(123)
      articles.articlesForm.article_imgs = articles.articlesForm.article_imgs.slice(0, -1)
      // 提交表单
      articles.addArticle().then(res => {
        ElMessage.success('发布成功')
        uploadRef.value!.clearFiles()
        formEl.resetFields()
      }).catch(err => {
        ElMessage.error('发布失败')
      })
    } else {
      ElMessage.error('请填写文章内容')
    }
  })
}

// 预览图片
const showPreview: UploadProps['onPreview'] = (file: UploadFile) => {
  articles.uploadDialogVisible = true
  articles.avatar = file.url!
}


</script>

<template>
  <Header></Header>
  <div class="wrapper" style="height: 600px;">
    <el-form style="margin-top: 20px;"
             ref="ruleFormRef"
             :model="articles.articlesForm"
             status-icon
             :rules="articlesRules"
             label-width="auto"
             class="demo-ruleForm"

    >
      <el-form-item label="请输入你要发布的文章内容" prop="content" label-position="top"
                    style="font-size: 18px;font-weight: bold;">
        <el-input v-model="articles.articlesForm.content" type="textarea" :rows="4" placeholder="请输入文章内容"
                  :autofocus="true"/>
      </el-form-item>
      <el-form-item label="是否展示个人信息发布" prop="is_show">
        <el-switch v-model="articles.articlesForm.is_show" active-value="1" inactive-value="0" active-color="#13ce66"
                   inactive-color="#eaecf0">
        </el-switch>
      </el-form-item>
      <el-form-item>
        <el-upload
            ref="uploadRef"
            list-type="picture-card"
            action="http://api.leleapi.cn:8000/articles/upload/"
            :auto-upload="true"
            :on-preview="showPreview"
            :limit="3"
            :multiple="true"
            :on-success="successImg"
            accept="image/png,image/jpeg,image/jpg,image/webp"
        >
          <el-icon>
            <Plus/>
          </el-icon>

        </el-upload>


      </el-form-item>
      <el-form-item>
        <div style="margin-left: auto;">
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            发布
          </el-button>
        </div>
      </el-form-item>

    </el-form>
  </div>
  <el-dialog v-model="articles.uploadDialogVisible">
    <el-image w-full fit="contain" :src="articles.avatar" alt="Preview Image"/>
  </el-dialog>
</template>

<style scoped>

</style>